<template>
	<view class="verify">
		<view class="expert" @click="toVerify" v-if="isExpert">
			<view class="state-1" v-if="verifyData.expert===0">待审核</view>
			<view class="state-2" v-else-if="verifyData.expert===1">已认证</view>
			<view class="state-3" v-else-if="verifyData.expert===2">未通过</view>
			<view class="expert-warp">
				<view class="warp-session1">
					<view class="tec-bg">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/verify/verify-icon-2.png"></image>
					</view>
				</view>
				<view class="warp-session2">
					<view>我是专家</view>
					<view>科技创新，专业服务</view>
				</view>
				<view class="go-verify" v-if="verifyData.expert===null">
					立即认证
				</view>
			</view>
		</view>
		<view class="agent" @click="JumpAgentType" v-if="isAgent">
			<view class="state-1" v-if="verifyData.company===0">待审核</view>
			<view class="state-2" v-else-if="verifyData.company===1">已认证</view>
			<view class="state-3" v-else-if="verifyData.company===2">未通过</view>
			<view class="expert-warp">
				<view class="warp-session1">
					<view class="mechan-bg">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/verify/verify-icon-1.png"></image>
					</view>
				</view>
				<view class="warp-session2">
					<view>我要入驻机构</view>
					<view>资源共享，合作共赢</view>
				</view>
				<view class="go-verify" v-if="verifyData.company===null">
					立即认证
				</view>
			</view>
		</view>
		<view class="agent" @click="toBroker">
			<view class="state-1" v-if="verifyData.agent===0">待审核</view>
			<view class="state-2" v-else-if="verifyData.agent===1">已认证</view>
			<view class="state-3" v-else-if="verifyData.agent===2">未通过</view>
			<view class="expert-warp">
				<view class="warp-session1">
					<view class="agent-bg">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/verify/verify-icon-3.png"></image>
					</view>

				</view>
				<view class="warp-session2">
					<view>我要成为经纪人</view>
					<view>随时交流，协助资源交易</view>
				</view>
				<view class="go-verify" v-if="verifyData.agent===null">
					立即认证
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		permissionJudge
	} from "@/utils/authority.js"
	export default {
		data() {
			return {
				verifyData: {},
				isExpert: true,
				isAgent: true
			}
		},
		onShow() {
			this.getExpertData();
		},
		methods: {
			toBroker() {
				if (!permissionJudge('membercenter:agent:info')) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pagesB/broker-verify/broker-verify'
				})
			},
			JumpAgentType() {
				console.log(permissionJudge('web:expert:info'), '机构认证判断')
				uni.navigateTo({
					url: '/pagesB/agent-verify/agent-verify'
				})
			},
			//跳转专家
			toVerify() {
				console.log(permissionJudge('web:expert:info'), '专家认证判断')
				uni.navigateTo({
					url: '/pagesB/expert-verify/expert-verify'
				})
			},
			//用户审核状态
			getExpertData() {
				let params = {};
				this.$request.get({
					url: 'user/getMyAuditStatus',
					data: params
				}).then(res => {
					console.log('审核状态', res)
					this.verifyData = res;
					if (this.verifyData.expert === 1) {
						this.isAgent = false;
					}
					if (this.verifyData.company === 1 || this.verifyData.company === 0) {
						this.isExpert = false;
					}
					if (this.verifyData.expert === 1 && this.verifyData.company === 1) {
						this.isAgent = true;
						this.isExpert = true;
					}
				})
			}
		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.go-verify {
		position: absolute;
		right: 29upx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 26upx;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
	}

	.mechan-bg {
		width: 84upx;
		height: 84upx;
		background: linear-gradient(180deg, rgba(114, 170, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		border-radius: 20upx;
		position: relative;

		image {
			width: 56upx;
			height: 54upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.agent-bg {
		width: 84upx;
		height: 84upx;
		background: linear-gradient(180deg, rgba(114, 238, 227, 1) 0%, rgba(21, 205, 195, 1) 100%);
		border-radius: 20upx;
		position: relative;

		image {
			width: 55upx;
			height: 53upx;
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.tec-bg {
		width: 84upx;
		height: 84upx;
		background: linear-gradient(165deg, rgba(255, 205, 68, 1) 0%, rgba(247, 181, 0, 1) 100%);
		border-radius: 20upx;
		position: relative;

		image {
			width: 47upx;
			height: 56upx;
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.state-1 {
		position: absolute;
		width: 126upx;
		height: 54upx;
		background: linear-gradient(90deg, rgba(255, 205, 69, 1) 0%, rgba(247, 181, 0, 1) 100%);
		border-radius: 0px 0px 0px 25upx;
		line-height: 54upx;
		right: 0;
		top: 0;
		font-size: 22upx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.state-2 {
		position: absolute;
		width: 126upx;
		height: 54upx;
		border-radius: 0px 0px 0px 25upx;
		background: linear-gradient(90deg, rgba(114, 220, 193, 1) 0%, rgba(91, 195, 169, 1) 100%);
		line-height: 54upx;
		right: 0;
		top: 0;
		font-size: 22upx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.state-3 {
		position: absolute;
		width: 126upx;
		height: 54upx;
		border-radius: 0px 0px 0px 25upx;
		background: linear-gradient(90deg, rgba(248, 125, 43, 1) 0%, rgba(222, 90, 2, 1) 100%);
		line-height: 54upx;
		right: 0;
		top: 0;
		font-size: 22upx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.warp-session3 {
		flex: 1;
		text-align: right;

		image {
			width: 16upx;
			height: 26upx;
		}
	}

	.verify {
		width: 100%;
		min-height: 100vh;
		background-color: #F8F8F8;
		box-sizing: border-box;
		padding: 41upx 31upx;

		.authen {
			text-align: center;
			margin-bottom: 46upx;

			>view {
				text-align: center;
				display: inline-block;
				position: relative;

				image {
					width: 152upx;
					height: 44upx;
				}
			}

			>view:before {
				content: '';
				display: block;
				position: absolute;
				top: 35%;
				transform: translateY(-50%);
				left: -102upx;
				width: 74upx;
				height: 2upx;
				background: rgba(163, 163, 163, 1);
			}

			>view:after {
				content: '';
				display: block;
				position: absolute;
				top: 35%;
				transform: translateY(-50%);
				right: -98upx;
				width: 74upx;
				height: 2upx;
				background: rgba(163, 163, 163, 1);
			}
		}

		.expert {
			width: 686upx;
			height: 200upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 10upx;
			margin-bottom: 20upx;
			position: relative;
			box-sizing: border-box;
			padding: 58upx 29upx;

			.expert-warp {
				display: flex;

				.warp-session1 {
					margin-right: 48upx;
					box-sizing: border-box;
				}

				.warp-session2 {
					width: 600upx;

					>view:nth-child(1) {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 40upx;
						margin-bottom: 10upx;
					}

					>view:nth-child(2) {
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(151, 151, 151, 1);
						line-height: 33upx;
					}
				}
			}

		}

		.agent {
			width: 686upx;
			height: 200upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 10upx;
			margin-bottom: 20upx;
			position: relative;
			box-sizing: border-box;
			padding: 58upx 29upx;

			.expert-warp {
				display: flex;

				.warp-session1 {
					margin-right: 48upx;
				}

				.warp-session2 {
					width: 600upx;

					>view:nth-child(1) {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 40upx;
						margin-bottom: 10upx;
					}

					>view:nth-child(2) {
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(151, 151, 151, 1);
						line-height: 33upx;
					}
				}
			}
		}

		.mechanism {
			width: 686upx;
			height: 200upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 10upx;
			margin-bottom: 78upx;
			box-sizing: border-box;
			padding: 66upx 28upx 44upx 50upx;

			.expert-warp {
				display: flex;

				.warp-session1 {
					margin-right: 48upx;
				}

				.warp-session2 {
					width: 600upx;

					>view:nth-child(1) {
						display: flex;
						margin-bottom: 20upx;

						.warp-session-inner1 {
							font-size: 32upx;
							font-weight: 550;
							color: rgba(51, 51, 51, 1);
							line-height: 44upx;
						}

						.warp-session-inner2 {
							flex: 1;
							text-align: right;
							padding-right: 40upx;

							view {
								display: inline-block;
								font-size: 24upx;
								box-sizing: border-box;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: rgba(25, 109, 236, 1);
								width: 94upx;
								height: 42upx;
								border-radius: 6upx;
								border: 2upx solid rgba(25, 109, 236, 1);
								line-height: 42upx;
								text-align: center;

							}


						}

					}

					>view:nth-child(2) {
						font-size: 24upx;
						font-weight: 400;
						color: rgba(163, 163, 163, 1);
						line-height: 36upx;
					}
				}

				.warp-session3 {
					display: flex;

					view:nth-child(1) {
						width: 94upx;
						height: 42upx;
						line-height: 42upx;
						border-radius: 6upx;
						border: 2upx solid rgba(25, 109, 236, 1);
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(25, 109, 236, 1);
						line-height: 42upx;
						text-align: center;
					}

					view:nth-child(2) {
						flex: 1;
						text-align: right;
					}

				}
			}
		}

		.identi-1 {
			display: flex;

			.session-1 {
				.image1 {
					width: 54upx;
					height: 46upx;
					margin-left: 12upx;
					margin-right: 34upx;
					margin-bottom: 12upx;
					display: inline-block;
					vertical-align: middle;
					margin-top: 8upx;
				}

				.image2 {
					width: 48upx;
					height: 52upx;
					margin-left: 18upx;
					margin-right: 34upx;
					display: inline-block;
					vertical-align: middle;
					display: inline-block;
					vertical-align: middle;
					margin-top: 10upx;
				}
			}

			.session-2 {
				flex: 1;
				margin-bottom: 48upx;

				h3 {
					font-size: 30upx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					line-height: 36upx;
					margin-bottom: 12upx;
				}

				p {
					font-size: 26upx;
					font-weight: 400;
					color: rgba(163, 163, 163, 1);
					line-height: 36upx;
				}
			}

		}

	}
</style>
